<template>
  <div class="wrap">
    <div class="item">
      <div :class="['icon ', HdDataMap['蹲位监测器'] && HdDataMap['蹲位监测器'][0].dwType === '无人' ? 'icon1' : 'icon1-1']"></div>
      <div class="desc">男厕所</div>
      <div class="count count1">{{ wcData.klDayCount | mkfs }} 
      </div>
    </div>
    <div class="item">
      <div class="icon icon2"></div>
      <div class="desc">女厕所</div>
      <div class="count count2">
        <!-- {{ wcData.womanWcNum | mkfs }} -->
      0
      </div>
    </div>
    <div class="item">
      <div class="icon icon3"></div>
      <div class="desc">第三卫生间</div>
      <div class="count count3">
        <!-- {{ wcData.threeWcNum | mkfs }} -->
        0
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    wcData: {
      type: Object,
      require: true,
      default: () => { },
    },
    HdData: {
      type: Array,
      require: true,
      default: () => { return [] },
    },
  },
  computed: {
    HdDataMap() {
      const retObj = {}
      if (Array.isArray(this.HdData) && this.HdData.length > 0) {
        for (let index = 0; index < this.HdData.length; index++) {
          const element = this.HdData[index];
          if (retObj[element.name] === undefined) {
            retObj[element.name] = [];
          }
          retObj[element.name].push({ ...element })
        }
      }
      return retObj
    }
  },
  data() {
    return {};
  },
  filters: {
    mkfs: function (value) {
      if (value === undefined) return 0;
      return value;
    },
  },
};
</script>
<style lang="scss" scoped>
.wrap {
  width: 505px;
  height: 250px;
  box-sizing: border-box;
  padding: 48px 48px 0px 48px;
  background: url("../../assets/img/home-04.png") no-repeat center center;
  background-size: contain;
  display: flex;

  .item {
    .icon {
      width: 133px;
      height: 103px;
      background-size: contain !important;

      &.icon1 {
        background: url("../../assets/img/home-1114.png") no-repeat center center;
      }

      &.icon1-1 {
        background: url("../../assets/img/home-1114-1.png") no-repeat center center;
      }

      &.icon2 {
        background: url("../../assets/img/home-1115.png") no-repeat center center;
      }

      &.icon3 {
        background: url("../../assets/img/home-1116.png") no-repeat center center;
      }
    }

    .desc {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
      line-height: 1;
    }

    .count {
      font-size: 29px;
      font-weight: 500;
      line-height: 1;
      margin-top: 12px;

      &.count1 {
        color: #9acefa;
      }

      &.count2 {
        color: #ff8dbd;
      }

      &.count3 {
        color: #33ff85;
      }
    }
  }
}
</style>